<template>
  <m-modal
    v-model="visible"
    title="属性"
    mask
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <m-attr-tip type="radio" />
    <a-tabs v-model="curTab" type="card" class="_tab">
      <a-tab-pane key="tree" tab="树" style="overflow-y:auto;border: 1px solid #D9D9D9;">
        <div class="g-pd-20" style="height:400px;">
          <m-select-tree
            :treeData="treeData"
            @select="handleTreeSelect"
          />
        </div>
      </a-tab-pane>
      <a-tab-pane key="list" tab="列表" style="overflow-y:auto;border: 1px solid #D9D9D9;">
        <div class="g-pd-20" style="height:400px;">
          <m-list
            :selectedNodes="[selectedNode]"
            :list="list"
            @select="handleListSelect"
          />
        </div>
      </a-tab-pane>
    </a-tabs>
  </m-modal>
</template>
<script>
import { Portal } from 'src/components/common/Portal.vue';
import { treeForEach } from 'src/util/common';
import Modal from 'src/components/common/CustomModal';
import AttrTip from '../comps/AttrTip';
import SelectTree from '../comps/SelectTree';
import SelectList from '../comps/SelectList';

const comp = {
  name: 'comp-select-type',
  components: {
    'm-modal': Modal,
    'm-attr-tip': AttrTip,
    'm-select-tree': SelectTree,
    'm-list': SelectList
  },
  props: {
    currentId: String,
    filterCondtion: Array, //// 过滤条件
  },
  data() {
    const [treeData, selectedItem] = this.formatTreeData(this.getTreeData(), this.currentId);

    return {
      visible: false,
      treeData,
      list: this.getList(treeData),
      selectedNode: selectedItem,
      curTab: 'tree',
    };
  },
  mounted() {
    this.visible = true;
  },

  methods: {
    handleOk() {
      const selectedItem = this.getSelectedItem();
      this.visible = false;
      this.$emit('sure', selectedItem);
    },
    handleCancel() {
      this.visible = false;
      this.$emit('close');
    },

    getTreeData() {

      return [app.sysmlModel];
    },
    formatTreeData(data) {
      let selectedItem = null;
      this.searchTree(data, null, 0, (node, parent, depth) => {
        const currentNode = { ...node };
        node.treeNode = currentNode; //// 在node中暂存currentNode
        currentNode.value = currentNode.id;
        currentNode.graphNode = node;
        currentNode.children = [];
        Object.defineProperty(currentNode, 'displayTitle', {
          get(){
            return node.displayTitle;
          }
        });
        Object.defineProperty(currentNode, 'iconPath', {
          get(){
            return node.iconPath;
          }
        });
        const type = node.getTypeName();
        currentNode.disabled = !this.filterCondtion.includes(type);
        currentNode.shouldCuted = currentNode.disabled; //// 为true时会被修剪掉
        currentNode.selected = false;
        if (currentNode.id === this.currentId) {
          currentNode.selected = true;
          selectedItem = currentNode;
        }
        if (parent) {
          currentNode.parent = parent;
          parent.treeNode.children.push(currentNode);
        }
        return node.children;
      });
      const treeNode = data[0].treeNode;
      data[0].treeNode = null;
      console.log('treeNode', treeNode);
      return [[treeNode], selectedItem];
    },

    /**
    * @param {array} node
    * @param {graphNode} parent
    * @param {number} depth
    * @param {function} callback
    * @returns {void}
    */
    searchTree(node, parent, depth, callback) {
      if (Array.isArray(node)) {
        const filteredNode = [];
        for (let i = 0; i < node.length; i++) {
          const child = node[i];
          this.searchTree(child, parent, depth, callback);
          if (!child.treeNode.shouldCuted) { //// 过滤掉子类全是不可选的类
            filteredNode.push(child.treeNode);
            if (parent) { //// 当有一个子类可被选择时，父类也可被选择
              parent.treeNode.shouldCuted = false;
            }
          }
          if (depth > 0) {
            child.treeNode = null;
          }
        }
        if (parent) {
          parent.treeNode.children = filteredNode;
        }
      } else {
        const children = callback(node, parent, depth);
        depth++;
        if (children) {
          this.searchTree(children, node, depth, callback);
        }
      }
    },
    getList(treeData) {
      const list = [];
      treeForEach(treeData, node => {
        list.push(node);
      });
      return list;
    },
    handleTreeSelect(model) {
      this.selectedNode && ( this.selectedNode.selected = false);
      model.selected = true;
      this.selectedNode = model;
    },
    handleListSelect(model) {
      this.handleTreeSelect(model);
      //// this.selectedNode = model;
    },
    getSelectedItem() {
      return this.selectedNode;
      //// return this.selectInfo.curTab == 'tree'
      ////   ? this.selectInfo.treeSelectItem
      ////   : this.selectInfo.listSelectItem;
    },
  }
};
export default comp;
export const selectType = new Portal(comp, { single: true });
export const portal = selectType;

</script>
<style lang="scss" scoped>
._tab {
  padding-left: 22px;
  padding-right: 22px;
  padding-top: 17px;
}
</style>
